<template>
  <view>
    <view class="box_b" v-if="!token">
      <!-- 提示登录的图标 -->
      <uni-icons
        style="display: flex; justify-content: center"
        type="contact-filled"
        size="100"
        color="#AFAFAF"
      ></uni-icons>
      <button type="button" @click="showDrawer" class="btn-login">
        一键登录
      </button>
      <p
        style="
          text-align: center;
          margin-top: 10px;
          font-size: 12px;
          color: gray;
        "
      >
        登录后享受更多权益
      </p>
    </view>

    <view v-else>
      <!-- 头像昵称区域 -->
      <view class="top-box">
        <button
          class="avatar-wrapper"
          open-type="chooseAvatar"
          @chooseavatar="onChooseAvatar"
        >
          <image class="avatar" :src="userInfo.logo"></image>
        </button>
        <input
          v-model="userInfo.name"
          placeholder-style="color:#fff"
          type="nickname"
          @change="genxin"
          class="weui-input"
          placeholder="请输入昵称"
        />
      </view>
      <view class="panel-list">
        <!-- 第二个面板 -->
        <!-- 第二个面板 -->
        <view class="panel">
          <!-- 面板的标题 -->
          <!-- <view class="panel-title">我的报价</view> -->
          <!-- 面板的主体 -->
          <view class="panel-body">
            <!-- 面板主体中的 item 项 -->
            <view @click="callChildMethod" class="panel-item">
              <uni-icons type="contact" size="30"></uni-icons>
              <text>我的签到</text>
            </view>
            <view @click="kecheng" class="panel-item">
              <uni-icons type="gift-filled" size="30"></uni-icons>
              <text>我的课程</text>
            </view>

            <view @click="task" class="panel-item">
              <uni-icons type="calendar" size="30"></uni-icons>
              <text>我的任务</text>
            </view>
          </view>
        </view>
        <!-- 第三个面板 -->
        <!-- 第三个面板 -->
        <view class="panel">
          <!-- <view class="panel-list-item">
 <text>收货地址</text>
 <uni-icons type="arrowright" size="15"></uni-icons>
</view> -->
          <!-- <view  @click="open" class="panel-list-item">
 <text>联系我们</text>
 <uni-icons type="arrowright" size="15"></uni-icons>
</view> -->
          <view @click="logout" class="panel-list-item">
            <text>退出登录</text>
            <uni-icons type="arrowright" size="15"></uni-icons>
          </view>
        </view>
      </view>
      <view> </view>
    </view>
    <rili ref="childRef" v-if="dakai" @guan="guan" />
  </view>
</template>

<script setup lang="ts">
import rili from "./coment/rilia/index.vue";
import {useCounterStore} from "../../stores/counter";
import {ref, onMounted, getCurrentInstance, computed} from "vue";
import {login} from "../../api/login";
// 签到
const childRef = ref<any>(null);

let dakai = ref(false);
const task = () => {
  uni.navigateTo({
    url: `/pages/my/task`,
  });
};
const guan = () => {
  dakai.value = false;
};
const callChildMethod = () => {
  dakai.value = true;
};
const kecheng = () => {
  console.log(121);

  uni.switchTab({
    url: "/pages/index/index",
  });
};
const counter = useCounterStore();
// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});

// 一个计算属性 ref
const userInfo = computed(() => {
  return counter.user;
});

const genxin = (e: any) => {
  userInfo.value.name = e.detail.value;
  counter.incrementName(counter.user);
};

let avatarUrl = ref(
  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"
);
// 获取头像 const
const onChooseAvatar = (e: any) => {
  avatarUrl.value = e.detail.avatarUrl;
  counter.user.logo = e.detail.avatarUrl;

  counter.incrementName(counter.user);
};

const dssds = ref();
// 打开窗口
const showDrawer = () => {
  uni.login({
    provider: "weixin", //使用微信登录
    univerifyStyle: {
      fullScreen: true,
    },
    onlyAuthorize: true,
    success: async function (loginRes) {
      uni.getStorageSync("storage_key");

      // 发起请求，一个登入请求
      const {data} = await login(loginRes.code);
      //打印请求结果
      //判断请求结果，并执行对应的逻辑
      if (data.code == 1) {
        // 请求成功，执行登入成功逻辑
        // 把token存入本地

        counter.increment(data.data);

        console.log("");
      } else {
        console.log("请求失败，执行登入失败逻辑");
      }
    },
  });
};
const logout = async () => {
  const data: any = await uni.showModal({
    title: "提示",
    content: "确认退出登录吗？",
  });

  if (data.confirm) {
    // 用户确认了退出登录的操作
    // 需要清空 vuex 中的 userinfo、token 和 address
    counter.removeTkeen();

    counter.incrementName({});
  }
};
const closeDrawer = () => {
  dssds.value.close();
};

onMounted(() => {});
</script>

<style scoped lang="scss">
.my-userinfo-container {
  height: 100%;
  // 为整个组件的结构添加浅灰色的背景
  background-color: #f4f4f4;

  .top-box {
    height: 400rpx;
    background-color: #029d94;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .avatar {
      display: block;
      width: 90px;
      height: 90px;
      border-radius: 45px;
      border: 2px solid white;
      box-shadow: 0 1px 5px black;
    }
    button {
      padding: 0;
      border-radius: 45px;
    }
    .nickname {
      color: white;
      font-weight: bold;
      font-size: 16px;
      margin-top: 10px;
    }
  }
}

input {
  text-align: center;
}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;
      }
    }
  }
}
.panel-list {
  padding: 0 10px;
  position: relative;
  top: -10px;

  .panel {
    background-color: white;
    border-radius: 3px;
    margin-bottom: 8px;

    .panel-title {
      line-height: 45px;
      padding-left: 10px;
      font-size: 15px;
      border-bottom: 1px solid #f4f4f4;
    }

    .panel-body {
      display: flex;
      justify-content: space-around;

      .panel-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        font-size: 13px;
        padding: 10px 0;

        .icon {
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}
.panel-list-item {
  height: 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 0 10px;
}
.avatar {
  width: 60px;
  height: 60px;
}
.avatar {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 45px;
  border: 2px solid white;
  box-shadow: 0 1px 5px black;
}
button {
  padding: 0;
  border-radius: 45px;
}
.top-box {
  height: 400rpx;
  background-color: #029d94;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
:deep(.weui-input) {
  font-weight: bold;
  font-size: 16px;
  margin-top: 10px;
  text-align: center;
  color: white !important;
}
.weui-input::placeholder {
  color: white !important;
}
.nickname {
  color: white !important;
}

.box_b {
  margin-top: 100px;
}
.btn-login {
  width: 90%;
  background-color: #029d94;
  color: #f4f4f4;
}
.insd {
  color: #f4f4f4;
}
</style>
